<template>
  <div class="brand-selection-container">
    <!-- 顶部提示信息 -->
    <div class="tip-box">
      <div class="tip-icon">?</div>
      <div class="tip-text">
        对店铺进行关联品牌，则店铺下单时，只能采购某个品牌的商品
      </div>
    </div>

    <!-- 品牌选择区域 -->
    <div class="form-section">
      <MultiSelect
        label="关联品牌"
        :required="true"
        placeholder="请选择关联的品牌"
        :options="brandOptions"
        v-model="selectedBrandIds"
        @change="handleBrandChange"
      />
    </div>

    <!-- 底部保存按钮 -->
    <div class="footer-btn">
      <button class="save-btn" @click="saveSelection">保存</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import MultiSelect from "@/component/selectMore/selectmore.vue";
import { onLoad } from "@dcloudio/uni-app";
import { saveBrand } from "@/api/store";
import { getSupplierBrandList } from "@/api/supplier";  
// 品牌选项数据
const brandOptions = ref([]);

// 已选中的品牌IDs
const selectedBrandIds = ref([]);
const id = ref(null);
// 计算已选中的品牌名称
const selectedBrandNames = computed(() => {
  return brandOptions.value
    .filter((item) => selectedBrandIds.value.includes(item.id))
    .map((item) => item.name)
    .join("、");
});

// 选择变化处理
const handleBrandChange = (ids) => {
  console.log("选中的品牌IDs:", ids);
};

// 保存选择
const saveSelection = async () => {
  if (selectedBrandIds.value.length === 0) {
    uni.showToast({
      title: "请选择至少一个品牌",
      icon: "none",
    });
    return;
  }
  await saveBrand({
    supplier_shop_id: id.value,
    brand_ids: selectedBrandIds.value,
  });
  uni.showToast({
    title: "保存成功",
    icon: "success",
  });
  uni.navigateBack();
};
const getBrandListData = async () => {
  // const res = await getShopBrand({ supplier_shop_id: id.value }); 
  const res = await getSupplierBrandList()
  brandOptions.value = res.map((i) => ({ id: i.id, name: i.name }));
};
onLoad(async (options) => {
  id.value = options.id;
  selectedBrandIds.value = options.brand_ids ? options.brand_ids.split(',').map(i=> Number(i)) : [];
  console.log(selectedBrandIds.value)
  await getBrandListData();
});
</script>

<style scoped>
.brand-selection-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
}

/* 顶部提示信息样式 */
.tip-box {
  display: flex;
  align-items: flex-start;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
}

.tip-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #f2f2f2;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 28rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.tip-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

/* 表单区域样式 */
.form-section {
  background-color: #ffffff;
  padding: 0 30rpx;
  flex: 1;
}

/* 底部按钮样式 */
.footer-btn {
  width: 100%;
  padding: 0;
  position: fixed;
  bottom: 0;
  left: 0;
}

.save-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #1989fa;
  color: #ffffff;
  font-size: 32rpx;
  text-align: center;
  border: none;
  border-radius: 0;
}
</style>
